<template>
  <div v-drag>
    <div class="mask" @click="closePopup(false)"></div>
    <div class="edit_box" v-loading="loading">
      <div class="box_head">
        <p>{{ mid ? '修改' : '新增' }}配送员</p>
        <i @click="closePopup(false)"></i>
      </div>
      <div class="box_body">
        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>负责仓库名：</span>
          <div :class="{'error_border':tip_num===1}">
            <el-select filterable placeholder="请选择仓库" v-model="warehouseId">
              <el-option
                :key="item.id"
                :label="item.name"
                :value="item.id"
                v-for="(item,index) in warehouseList">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>用户：</span>
          <div :class="{'error_border':tip_num===2}" >
            <el-select filterable placeholder="请选择用户" v-model="userId" value-key="id">
              <el-option
                :key="item.id"
                :label="item.name"
                :value="item.id"
                v-for="(item,index) in userList">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="line">
          <span class="lab" style="width: 155px;">是否授权多个仓库：</span>
          <div>
            <el-radio-group v-model="isAll">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </div>
        </div>
        <p class="error_line">{{ infoTip }}</p>
      </div>
      <div class="box_foot">
        <span @click="closePopup(false)">取消</span>
        <span @click="confirmEdit">确定</span>
      </div>
    </div>
  </div>
</template>

<script>
  import {getDetail,addData,updateData,wareSender} from "@/api/basic/warehouse/sender";
  import {getAllWarehouse} from "@/api/basic/warehouse";
  import {judgeRole} from "@/utils/warehouseAuth";

  export default {
    props: ['mid'],
    data() {
      return {
        userId:'',
        warehouseId:'',
        isAll:0,
        warehouseName:'',
        userName:'',
        parentMenu: [],
        warehouseList:[],
        userList:[],
        infoTip: '',
        tip_num: '',
        loading: false
      }
    },
    mounted() {
      let str = localStorage.getItem('water_user');
      let user = str? JSON.parse(str).loginUser: '';
      if (user.type===3){
        let roleHouse = judgeRole();
        this.warehouseList = roleHouse.list;
        this.warehouseId = roleHouse.id;
      }else{
        this.warehouseData();
      }
      this.userData();
      if (this.mid) {
        this.getDetail();
      }
    },
    methods: {
      getDetail() {
        let that=this;
        this.loading = true;
        getDetail(this.mid).then(res => {
          that.setData(res);
          that.loading = false;
          //拼接数组
          let wareHouse = {id:res.warehouseId,name:res.warehouseName};
          that.warehouseList.push(wareHouse);
          let user = {id:res.userId,name:res.name};
          that.userList.push(user);
        }).catch((e) => {
          that.loading = false;
        });
      },


      //仓库列表
      warehouseData() {
        let that = this;
        getAllWarehouse(6).then(res => {
          if (res){
            that.warehouseList = res ;
            that.warehouseId = res[0].id;
          }
        }).catch((e) => {
          that.warehouseList = [];
        });
      },


      //用户列表
      userData(){
        let that=this;
        wareSender().then(res => {
          that.userList = res ? res : [];
        }).catch((e) => {
          that.userList = [];
        });
      },


      setData(obj) {
        this.userName=obj.name;
        this.userId=obj.userId;
        this.warehouseId = obj.warehouseId;
        this.warehouseName=obj.warehouseName;
        this.isAll=obj.isAll
      },

      // 确认编辑
      confirmEdit() {
        if (this.warehouseId === '') {
          this.setTip(1, '请选择仓库！');
        } else if (this.userId === '') {
          this.setTip(2, '请选择用户！');
        }else {
          this.sendInfo();
        }
      },

      sendInfo() {
        let that = this;
        that.loading = true;
        let data = {
          userId:that.userId,
          warehouseId:that.warehouseId,
          isAll:that.isAll,
        };
        if (that.mid) {
          data.id = that.mid;
          updateData(data).then(res => {
            that.closePopup(true);
            that.$message.success({
              message:'操作成功！',
              duration:1500
            });
          }).catch((e) => {
            that.loading = false;
          });
        }else {
          addData(data).then(res => {
            that.closePopup(true);
            that.$message.success({
              message:'操作成功！',
              duration:1500
            });
          }).catch((e) => {
            that.loading = false;
          });
        }
      },

      setTip(num, text) {
        this.tip_num = num;
        this.infoTip = text
      },

      // 关闭
      closePopup(refresh) {
        this.$emit('listenToChild', {refresh: refresh})
      }
    }
  }
</script>

<style scoped>

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #60BAE7;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #DCDFE6;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    border: 1px solid #DCDFE6;
    border-radius: 6px;
  }

  .avatar {
    max-width: 210px;
    min-width: 60px;
    height: 100px;
    display: block;
    border-radius: 6px;
    margin-right: 15px;
    border: 1px solid #bbb;
  }
</style>
